<template>
<div class="temp">
   <div class="tem" v-for="(v,i) in this.$store.state.homem.arr.coffee" :key="i">
    <img :src="v.coffee_img" />
    <p class="black">{{v.coffee_name}}</p>
    <p class="white">
      <span class="gprice">{{v.coffee_reality_price}}</span>
      <span class="oprice"><del>{{v.coffee_original_price}}</del></span>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gouwuche" />
      </svg>
    </p>
    <span class="last">到手价</span>
  </div>  
</div>
 
</template>

<script>

export default {
    mounted() {
    this.$store.dispatch("actiondemoa",{url:"/mock"});    
    // this.$store.dispatch("actiondemoa",{url:"http://81.68.226.70:8050/coffee/"});    
    // http://81.68.226.70:8050/coffee/

  },

 
};
</script>

<style scoped>
.temp{
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-evenly;
}
.tem{
    /* text-align: center; */
    background-color: white;
    width: 0.83rem;
    height: 1.32rem;
    border-radius: 5px;
}
img{
    width: 100%;
    height: 53%;
    margin-left: 0.01rem;
}
p{
    width: 0.83rem;
    text-indent: 0.02rem;
    font-size: 0.1rem;

}
.black{
    
    /* background-color: red; */
    color: black;
}
.white{
  position: relative;
    color: #fb5450;
    text-indent: 0.01rem;
    margin-top: 0.05rem;
}
.last{
    background-color: #fce2d8;
    color: #fb5450;
    font-size: 0.1rem;
    margin-left: 0.05rem;
}
svg{
    float: right;
}
.icon {
  top: 0.15rem;
    position: absolute;
    right: 0.1rem;
  width: 0.2rem;
  height: 0.2rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon use{
  width: 0.1rem;
  height: 0.1rem;
}
.oprice{
  /* font-size: 0.08rem; */
  color: black;
}
</style>